<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="数据">
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>时间周期</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.timeCount" class="miniinput" type="number" />
                    <el-select style="width:100px;" v-model="obj.timeType" size="mini">
                        <el-option label="天" :value="2" />
                        <el-option label="时" :value="1" />
                        <el-option label="分" :value="0" />
                    </el-select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>周期字体</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.timeOutSize" class="miniinput" type="number" />
                    <el-color-picker v-model="obj.timeOutColor" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj, 'timeOutColor', $event)" />
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': obj.timeOutWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', obj, 'timeOutWeight')"><i
                                class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': obj.timeOutStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', obj, 'timeOutStyle')"><i class="iconfont icon-zitixieti"></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>开始时间</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-date-picker class="startTime" v-model="obj.startTime" align="right" type="datetime"
                        placeholder="选择日期时间" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>时间字体</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.dateTimeSize" class="miniinput" type="number" />
                    <el-color-picker v-model="obj.dateTimeColor" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj, 'dateTimeColor', $event)" />
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': obj.dateTimeWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', obj, 'dateTimeWeight')"><i
                                class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': obj.dateTimeStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', obj, 'dateTimeStyle')"><i class="iconfont icon-zitixieti"></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>是否闪烁</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-checkbox v-model="obj.isTwinkle"></el-checkbox>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" v-if="obj.isTwinkle">
                <el-col :span="8" class="editlabel">
                    <span>颜色设置</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-color-picker v-model="obj.bgColor1" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj, 'bgColor1', $event)" />
                    <span style="padding:10px;"></span>
                    <el-color-picker v-model="obj.bgColor2" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj, 'bgColor2', $event)" />
                </el-col>
            </el-row>
            <title-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"
                :setFontStyle="setFontStyle" :isShowCheckout="false"></title-form>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    name: "TimeOutForm",
    props: {
        predefineColors: Array,
        obj: Object,
        setFontStyle: Function,
    },
    model: {
        prop: "obj",
        event: "change",
    },
    components: {
        TitleForm: () => import('../mixin/TitleForm.vue'),
        BoxForm: () => import('../mixin/BoxForm.vue'),
    },
    methods: {
        setColorChange(item, attr, val) {
            item[attr] = val;
            this.$emit("change", this.obj);
        },
    }
}
</script>

<style>
.startTime .el-input__inner {
    padding-left: 30px;
}
</style>